<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/style.css">
<!--
    <script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
        !window.jQuery && document.write('<script src="js/jquery.min.js"><\/script>');
    </script>
    <script src="js/public.js"></script>
-->
    <title>云中宝</title>
</head>

<body>
<div class="wrapper">
<div class="header">
    <ul>
        <li class="header_title_wrapper">云中宝套餐服务</li>
        <li class="clear"></li>
    </ul> 
</div>
<div class="main pd10">
    <div class="content_wrapper">
        <p class="servive_tips" style="margin-top:50px">订单提交成功，请选择支付方式</p>
        <p class="cnt_tit">购买详情</p>
        <ul class="cnt_list goods_list">
            <li>订单号：<span>12345678</span></li>
            <li>产品名称：<span>三个月社会保险代缴</span></li>
            <li>支付金额：<span>2000</span>元</li>
        </ul>
        <p class="cnt_tit">支付方式</p>
        <ul class="cnt_list paying_list">
            <li class="paying_style active"><b></b><img src="images/icon/ap.png" width="40">支付宝支付</li>
<!--            <li class="paying_style"><b></b><img src="images/icon/wx.png" width="40">微信支付</li>-->
        </ul>
        <div class="form_item">
            <a class="btn btn_lg btn_round w_4_7" href="javascript:void(0)" onclick="wap_pay()">确定</a>        
            <a class="btn btn_lg btn_round w_3_3" href="per.html">取消</a>        
        </div>  
    </div>    
</div>
<style>
.goods_list{
    background-color: #ececec;
    padding: 5px;
}
.paying_list{
    
}
ul.paying_list li{
    padding: 8px 5px;
    border-top: 1px solid #ccc;
    vertical-align: middle;
}
ul.paying_list li img,ul.paying_list li b{
    vertical-align: middle;
    margin-right: 20px;
}
ul.paying_list li:last-child{
    border-bottom: 1px solid #ccc;
}
.paying_style b{
    border: 1px solid #666;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.paying_style.active b{
    background-color:#666
}
</style> 
</div>
</div>
<script src="js/ap.js" type="text/javascript"></script>
<script src="js/pingpp.js" type="text/javascript"></script>
<script type="text/javascript">
var price = 2000;//金额，后期需传入
var _payArr=["alipay_wap","wx_pub"]
var _paying_btns = document.querySelectorAll('.paying_style')
var _paying_style = 0; //支付方式的索引
for(var i =0;i<_paying_btns.length;i++){
    _paying_btns[i].index = i;
    _paying_btns[i].onclick = function(){
        _paying_btns.className = "paying_style";
        _paying_style = this.index;
        for(var j=0;j<_paying_btns.length;j++){
            _paying_btns[j].className="paying_style"
        }
        this.className='paying_style active'
        
    }
}
function wap_pay() {
    var amount = price;
    var channel =_payArr[_paying_style] 
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "YOUR-URL", true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.send(JSON.stringify({
        channel: channel,
        amount: amount
    }));
    console.log(channel)
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
            pingpp.createPayment(xhr.responseText, function(result, err) {
                if (result=="success") {
                    // payment succeed
                    alert("做到了")
                } else {
                    alert("返回的result不是 success")
                    console.log(result+" "+err.msg+" "+err.extra);
                }
                console.log(result);
                console.log(err);
            });
        }
    }
}
</script>  
</body>
</html>